<script setup lang='ts'>
import {PropType, reactive, readonly, computed, onDeactivated} from 'vue'
import {HeaderData, Operation} from '@/components/dTable/dTable'
import {Dictionary} from '@/api/config'
import dIcon from '@/components/dIcon.vue'

const props = defineProps({
  row:{
    type:Object as PropType<any>,
    required:true
  },
  col:{
    type:Object as PropType<HeaderData>,
    required:true
  },
  showBubble:{
    type:Boolean,
    default:true
  },
  //强制显示按钮
  forceShowButton:{
    type:Boolean,
    default:false
  }
})

const getButtonShow = (oper:Operation) => {
  return true
}
const getButtonLabel = (oper:Operation) => {
  return oper.label
}
//找到按钮数据
const operationArr = computed<Array<Operation>>(() => {
  const row = reactive(props.row)
  return readonly(row[props.col.prop])
})

//获取样式
const getClass = (oper:Operation) => {
  const operClass:Dictionary<boolean> = {}
  if (oper.className) operClass[oper.className] = true
  return operClass
}
//
const emits = defineEmits(['opertionClick'])
//点击事件
const onClick = (code:string, row) => {
  emits('opertionClick', code, row)
}

//受控
const tooltipVisible = reactive<Dictionary<boolean>>({})

onDeactivated(() => {
  for (const key in tooltipVisible) {
    tooltipVisible[key] = false
  }
})
</script>

<template>
  <div class="d-operation d-common-flex-row">
    <template v-for="item in operationArr" :key="item.code">
      <div v-if="getButtonShow(item)" class="d-common-flex-center d-operation-item" @click="onClick(item.code,row)">
        <el-tooltip
          v-if="item.iconConfig"
          v-model:visible="tooltipVisible[item.code]"
          effect="dark"
          placement="top"
          :class="getClass(item)"
          :content="getButtonLabel(item)"
          :disabled="!showBubble"
        >
          <d-icon :icon-config="item.iconConfig" @mouseenter="tooltipVisible[item.code] = true" @mouseleave="tooltipVisible[item.code] = false" />
        </el-tooltip>
        <el-button v-else class="d-operation-button" :type="item.elType?item.elType:'primary'" :plain="item.plain">
          {{ getButtonLabel(item) }}
        </el-button>
      </div>
    </template>
  </div>
</template>

<style scoped>
.d-operation-item+.d-operation-item{
  margin-left: var(--d-margin-level-1);
}
.d-operation-button {
  padding: 4px 12px;
  font-size: var(--d-font-size-small);
  height: 24px;
  min-width: 48px;
  border-radius: 2px;
}
</style>